/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
// import React from 'react'
import {
  ActionSheet,
  Button,
  Divider,
  Avatar,
  Card,
  Grid,
  List,
  Toast,
  Popup,
  Form,
  Input,
  ImageUploader,
} from "antd-mobile";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  SetOutline,
  AppOutline,
  FileOutline,
  FilterOutline,
  StarOutline,
  EditSOutline,
  EyeInvisibleOutline,
  TextOutline,
  CompassOutline,
} from "antd-mobile-icons";
import MyNavBar from "../components/nav-bar";
import "../css/user.scss";
import useUser from "../hooks/use-User";
import { removeToken, uploadAction } from "../utils/tools";
import { modifyPasswordAPI, modifyUserInfoAPI } from "../services/user";
import { photoFileLoadAPI } from "../services/auth";
// import { demoSrc, mockUpload, mockUploadFail } from "./utils";
// 基础用法
function Basic() {
  const [visible, setVisible] = useState(false);

  const navigate = useNavigate();

  return (
    <>
      <Button
        color="primary"
        size="large"
        block
        onClick={() => setVisible(true)}
      >
        退出app
      </Button>
      <ActionSheet
        closeOnAction={true}
        visible={visible}
        actions={[
          { text: "~.~再看看~.~", key: "copy" },
          { text: "退出登录", key: "exit" },
        ]}
        onClose={() => setVisible(false)}
        onAction={(action) => {
          if (action.key == "exit") {
            console.log("ok");
            removeToken();
            Toast.show({
              icon: "loading",
              content: "加载中…",
            });
            setTimeout(() => {
              Toast.show({ icon: "success", content: "退出成功" });
              navigate("/");
            }, 3000);
          }
        }}
      />
    </>
  );
}

// 上传状态
const UploadStatus = ({ imageUrl }) => {
  // console.log(props);

  const demoSrc =
    "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60";

  const { userInfo } = useUser();
  console.log(userInfo);
  const [fileList, setFileList] = useState([
    {
      url: demoSrc,
    },
  ]);
  // setTimeout(() => {
  //   console.log(fileList[0].url.slice(fileList[0].url.indexOf(":") + 1));
  // }, 5000);
  // console.log(fileList);

  return (
    <ImageUploader
      // multiple
      maxCount={1}
      value={fileList}
      onChange={setFileList}
      upload={async (file) => {
        console.log(file);
        const formData = new FormData();
        formData.append("file", file.name);

        photoFileLoadAPI(formData).then((res) => {
          console.log(res);
        });

        imageUrl(
          URL.createObjectURL(file)
            .slice(5)
            .replace("5173", "3006/common/upload")
        );
        return { url: URL.createObjectURL(file).slice(5) };
      }}
    />
  );
};

function User() {
  const { userInfo } = useUser();
  const [visible3, setVisible3] = useState(false);
  const [visible4, setVisible4] = useState(false);

  const [img, setImg] = useState("");

  const navigate = useNavigate();

  const imageUrl = (v) => {
    setImg(v);
  };
  // console.log(img);

  return (
    <main>
      <header>
        <MyNavBar title="个人中心" />
        <Divider style={{ margin: "0" }} />
      </header>
      <section>
        <div className="secOne">
          <div>
            <p>兑换会员</p>
            <div>
              <SetOutline fontSize={20} />
            </div>
          </div>
          <div className="two">
            <div>
              <Avatar
                src={userInfo.avatar}
                style={{ "--size": "65px", borderRadius: "50%" }}
              />
            </div>
            <div className="twoO">
              <h2>完善信息</h2>
              <div>
                <p className="p1">常用就诊人</p>
                <p className="p2">就诊人病例管理</p>
              </div>
            </div>
          </div>
          <div className="three">
            <Card title="我的订单">
              <List style={{ marginBottom: "8px" }}></List>
              <Grid columns={4} gap={65}>
                <Grid.Item>
                  <div className="item">
                    <AppOutline color="#6291fe" fontSize={35} />
                    <span>问诊</span>
                  </div>
                </Grid.Item>
                <Grid.Item>
                  <div className="item">
                    <FileOutline color="#6291fe" fontSize={35} />
                    <span>处方</span>
                  </div>
                </Grid.Item>
                <Grid.Item>
                  <div className="item">
                    <FilterOutline color="#6291fe" fontSize={35} />
                    <span>药店</span>
                  </div>
                </Grid.Item>
                <Grid.Item>
                  <div className="item">
                    <StarOutline color="#6291fe" fontSize={35} />
                    <span>其他</span>
                  </div>
                </Grid.Item>
              </Grid>
            </Card>
          </div>
        </div>
        <section className="sectionTwo">
          <Card title="我的设置">
            <List>
              <List.Item prefix={<TextOutline />} onClick={() => {}}>
                我的订单
              </List.Item>
              <List.Item prefix={<CompassOutline />} onClick={() => {}}>
                收货地址
              </List.Item>
              <List.Item
                prefix={<EditSOutline />}
                onClick={() => {
                  setVisible3(true);
                }}
              >
                修改信息
                <Popup
                  visible={visible3}
                  onMaskClick={() => {
                    setVisible3(false);
                  }}
                  position="right"
                  bodyStyle={{
                    minWidth: "60vw",
                    backgroundImage:
                      "url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F25%2F20160725183305_ReWLE.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688176610&t=debc95d11ff5644e889ef508a9488851')",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "300px",
                    backgroundPosition: "-20px 624px",
                  }}
                >
                  <Card
                    style={{
                      boxShadow: "0 0 2px 2px gray",
                      width: "90%",
                      margin: "100px auto 0",
                    }}
                  >
                    <Form
                      onFinish={async (v) => {
                        console.log({ ...v, avatar: img });
                        await modifyUserInfoAPI({ ...v, avatar: img }).then(
                          (res) => {
                            console.log(res);
                          }
                        );
                      }}
                      footer={
                        <Button
                          block
                          type="submit"
                          color="primary"
                          size="lager"
                        >
                          提交
                        </Button>
                      }
                    >
                      <Form.Header>用户信息修改</Form.Header>
                      <Form.Item label="昵称" name="nickName">
                        <Input placeholder="请输入昵称" />
                      </Form.Item>
                      <Form.Item label="照片" name="avatar">
                        <UploadStatus imageUrl={imageUrl} />
                      </Form.Item>
                      <Form.Item label="手机号" name="mobile">
                        <Input placeholder="请输入手机号" />
                      </Form.Item>
                      <Form.Item label="地址" name="address">
                        <Input placeholder="请输入地址" />
                      </Form.Item>
                    </Form>
                  </Card>
                </Popup>
              </List.Item>
              <List.Item
                prefix={<EyeInvisibleOutline />}
                onClick={() => {
                  setVisible4(true);
                }}
              >
                修改密码{" "}
                <Popup
                  visible={visible4}
                  onMaskClick={() => {
                    setVisible4(false);
                  }}
                  position="right"
                  bodyStyle={{
                    minWidth: "60vw",
                    backgroundImage:
                      "url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F25%2F20160725183305_ReWLE.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688176610&t=debc95d11ff5644e889ef508a9488851')",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "300px",
                    // backgroundPosition: "-15px",
                    backgroundPosition: "-20px 624px",
                  }}
                >
                  <Card
                    style={{
                      boxShadow: "0 0 2px 2px gray",
                      width: "90%",
                      margin: "100px auto 0",
                    }}
                  >
                    <Form
                      onFinish={async (v) => {
                        console.log(v);
                        const res = await modifyPasswordAPI({
                          ...v,
                          oldPassword: userInfo.password,
                        });
                        if (res.success) {
                          // navigate("/login");
                          console.log("success");
                          Toast.show({
                            icon: "success",
                            content: "修改密码成功",
                          });
                        }
                      }}
                      footer={
                        <Button
                          block
                          type="submit"
                          color="primary"
                          size="lager"
                        >
                          提交
                        </Button>
                      }
                    >
                      <Form.Header>用户修改密码</Form.Header>
                      <Form.Item
                        label="新密码"
                        name="password"
                        rules={[{ required: true, message: "必填字段" }]}
                      >
                        <Input
                          type="password"
                          placeholder="请输入新密码"
                          clearable
                        />
                      </Form.Item>
                    </Form>
                  </Card>
                </Popup>
              </List.Item>
            </List>
          </Card>
        </section>
        <Basic />
      </section>
    </main>
  );
}

export default User;
